/*
 * @Author: ChenPeng
 * @LastEditors: ChenPeng
 * @LastEditTime: 2021-08-19 23:48:48
 */
// 渲染

/**
 *  渲染，根据 DOM 树在 canvas 上绘制出网站
 * @param targetElement canvas 实例
 * @param DOM 已经计算位置的 dom 树 （dom暂时使用any类型欺骗类型检查）
 */
export default function render(targetElement: HTMLCanvasElement, dom: any) {
  // console.log(targetElement, dom);
  const ctx = targetElement.getContext("2d");
  if (dom.style) {
    ctx.fillStyle = dom.backgroundColor;
    ctx.fillRect(dom.style.left, dom.style.top, dom.style.width, dom.style.height);
  }
  if (dom.children) {
    dom.children.forEach((item: any) => {
      render(targetElement, item);
    });
  }
}
// 用于在renderer.ts 展示效果的
// const canvas = <HTMLCanvasElement>document.getElementById("browser-content");
// const ctx = canvas.getContext("2d");

// function renderH(draw: CanvasRenderingContext2D, el: any) {
//   // eslint-disable-next-line no-param-reassign
//   draw.fillStyle = el.style.color;
//   draw.fillRect(el.style.left, el.style.top, el.style.width, el.style.height);
//   if (el.children) {
//     el.children.forEach((item: any) => {
//       renderH(draw, item);
//     });
//   }
// }

// const ssr: any = [
//   {
//     name: "div",
//     style: {
//       left: 0,
//       top: 0,
//       width: 200,
//       height: 300,
//       color: "#00AAAA",
//     },
//     children: [
//       {
//         name: "div",
//         children: [],
//         style: {
//           left: 20,
//           top: 300,
//           color: "#BBC0AA",
//           width: 50,
//           height: 50,
//         },
//       },
//     ],
//   },
//   {
//     name: "div",
//     style: {
//       children: [],
//       left: 10,
//       top: 10,
//       width: 300,
//       height: 100,
//       color: "#FF0000",
//     },
//   },
// ];
// ssr.forEach((curr: any) => {
//   renderH(ctx, curr);
// });
